<script setup lang="ts">
import { reactive, watch, ref } from 'vue'
const props = defineProps<{
  tableHeadData: any
  tableBodyData: any
}>()
</script>
<template>
  <ul>
    <li class="list-th">
      <span v-for="item in tableHeadData" :key="item" :title="item">
        {{ item }}
      </span>
    </li>
    <li v-for="(item, index) in tableBodyData" :key="item.id" class="list-td">
      <span :title="item.name">
        {{ item.name }}
      </span>
      <span
        :class="{
          red: item.cnRegion.includes('-'),
        }"
        :title="item.cnRegion"
      >
        {{ item.cnRegion }}
      </span>
      <span
        :class="{
          red: item.euAsiaRegion.includes('-'),
        }"
        :title="item.euAsiaRegion"
      >
        {{ item.euAsiaRegion }}
      </span>
      <span
        :class="{
          red: item.asiaPacificRegion.includes('-'),
        }"
        :title="item.asiaPacificRegion"
      >
        {{ item.asiaPacificRegion }}
      </span>
      <span
        :class="{
          red: item.americaRegion.includes('-'),
        }"
        :title="item.americaRegion"
      >
        {{ item.americaRegion }}
      </span>
      <span
        :class="{
          red: item.africaRegion.includes('-'),
        }"
        :title="item.africaRegion"
      >
        {{ item.africaRegion }}
      </span>
    </li>
  </ul>
</template>
<style lang="scss" scoped>
ul {
  width: 100%;
  height: 260px;
  font-size: 12px;
  li {
    border-bottom: 2px solid #010826;
  }

  .list-th {
    display: flex;
    font-weight: 700;
    justify-content: space-around;
    span {
      flex: 1;
      height: 65px;
      text-align: center;
      line-height: 65px;
      white-space: nowrap; /* 不允许文本换行 */
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 超出部分省略为省略号 */
      font-size: 10px;
    }
  }
  .list-td {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: calc((260px - 65px) / 3);
    span {
      flex: 1;
      text-align: center;
      white-space: nowrap; /* 不允许文本换行 */
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 超出部分省略为省略号 */
      font-size: 10px;
    }
  }
  .red {
    color: red;
  }
}
</style>
